<template>
	<view class="pages">
		<view class="bac"></view>
		<view class="outer">
			<view
				class="coupon-card"
				v-for="(item, index) in coupons"
				:key="index"
			>
				<!-- 票角镂空 -->
				<view class="cutout cutout-left"></view>
				<view class="cutout cutout-right"></view>

				<view class="coupon-main">
					<view class="coupon-left">
						<view class="coupon-limit">{{ item.limitText }}</view>
						<view class="coupon-condition">{{ item.conditionText }}</view>
						<view class="coupon-valid">有效期至：{{ item.validDate }}</view>
					</view>
					<view class="coupon-right">
						<view class="currency">¥</view>
						<view class="amount">{{ item.amount }}</view>
					</view>
				</view>

				<view class="coupon-footer">
					<view class="valid-range">有效期至：{{ item.validDate }}</view>
					<view class="use-btn">去使用 ></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue'

	const coupons = ref([
		{
			limitText: '仅限于XX加油站使用',
			conditionText: '满200元可用',
			amount: 20,
			validDate: '2020.04.11—2023.05.11'
		},
		{
			limitText: '通用',
			conditionText: '满200元可用',
			amount: 20,
			validDate: '2020.04.11—2023.05.11'
		},
		{
			limitText: '仅限于XX加油站使用',
			conditionText: '满200元可用',
			amount: 20,
			validDate: '2020.04.11—2023.05.11'
		}
	])

</script>

<style>
	.pages {
		background-color: white;
	}

	.bac {
		background-color: #2b85e4;
		height: 200rpx;
	}

	.outer {
		margin-top: -140rpx;
		background-color: white;
		width: 92%;
		border-radius: 20rpx;
		margin-left: 30rpx;
		padding: 20rpx 0 40rpx;
	}

	.coupon-card {
		position: relative;
		margin: 24rpx 24rpx;
		border-radius: 16rpx;
		overflow: hidden;
		background: linear-gradient(90deg, #ff9f43 0%, #ff6b3d 100%);
		box-shadow: 0 6rpx 20rpx rgba(255, 107, 61, 0.25);
	}

	/* 票角镂空（左右半圆形） */
	.cutout {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		width: 28rpx;
		height: 28rpx;
		background-color: #fff;
		border-radius: 50%;
		z-index: 1;
	}

	.cutout-left {
		left: -14rpx;
	}

	.cutout-right {
		right: -14rpx;
	}

	.coupon-main {
		display: flex;
		align-items: center;
		padding: 28rpx;
	}

	.coupon-left {
		flex: 1;
		color: #fff;
	}

	.coupon-limit {
		opacity: 0.85;
		font-size: 24rpx;
		margin-bottom: 12rpx;
	}

	.coupon-condition {
		font-size: 34rpx;
		font-weight: 700;
	}

	.coupon-valid {
		margin-top: 18rpx;
		font-size: 22rpx;
		opacity: 0.85;
	}

	.coupon-right {
		display: flex;
		align-items: baseline;
		color: #fff;
	}

	.currency {
		font-size: 30rpx;
		margin-right: 6rpx;
	}

	.amount {
		font-size: 60rpx;
		font-weight: 800;
		line-height: 1;
	}

	.coupon-footer {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 28rpx;
		background: linear-gradient(90deg, rgba(255,255,255,0.18), rgba(255,255,255,0.22));
		color: #fff;
		font-size: 22rpx;
	}

	.use-btn {
		font-size: 24rpx;
	}

</style>